<template>
  <div>
		<template  v-if="processInstanceData.length">
			<a-steps
      direction="vertical"
      :current="processInstanceData[0].selectIndex">
      <a-step v-for="(item, index) in processInstanceData" :key="index" class="addsatus">
        <span class="nodeName">{{ item.nodeName }}</span>
        <template #icon>
          <span
            class="processComStyle"
            :style="{
              border: `1px solid ${index + 1 <= item.selectIndex ? '#0061FF' : '#979797'}`,
              background:
                item.index + 1 < item.selectIndex || item.index + 1 > item.selectIndex
                  ? '#FFF'
                  : '#0061FF',
            }"></span>
        </template>
        <div class="process-li" v-for="(ele, eleindex) in (item.auditUserInfoList || [])" :key="eleindex">
          <div class="process-tx">
            <img :src="ele?.avatar || txDefalut" />
          </div>
          <div style="width: 100%">
            <p style="display: flex; justify-content: space-between; align-items: center">
              <span
                :style="{
                  color: item.index <= item.selectIndex ? '#333333' : '#999',
                  fontSize: '16px',
                }">
                {{ ele?.auditUser }}
              </span>
              <span style="color: #666; font-size: 13px">{{ ele?.approvedAt }}</span>
            </p>
            <p style="display: flex; justify-content: space-between; align-items: center">
              <span
                :style="{
                  color:
                    processNode[ele?.auditResult].color ||
                    (item.index <= item.selectIndex ? '#666' : '#b4b4b4'),
                  fontSize: '12px',
                }">
                {{ processNode[ele?.auditResult].name }}
                <span style="color: #999; font-size: 12; padding-left: 10px">
                  {{ ele?.waitTime}}
                  </span>
              </span>
              <span style="color: #666; font-size: 12px; padding-left: 10px">
                {{ timeSplit(ele?.endTime, 'MM-DD HH:mm')}}
              </span>
            </p>
            <template v-if="ele?.auditOpinion">
              <p
                style="
                  width: 100%;
                  background-color: #f2f2f2;
                  padding: 5px 8px;
                  margin-top: 5px;
                  border-radius: 5px;
                  color:#000;
                  white-space: normal;
                  word-break: break-all;
                "
                >{{ ele?.auditOpinion }}</p
              >
            </template>
          </div>
        </div>
      </a-step>
    </a-steps>
		</template>
  </div>
</template>
<script lang="ts" setup>
// import moment from 'moment'
import txDefalut from '@/assets/approval/20241014-112329.jpeg'
import { onMounted, ref, PropType } from 'vue'
import {
  processApprovalTypeObj,
  processInfo,
  processNode,
  materialState,
  paymentProState,
  supplementaryProState,
  paymentStatus,
  processNodeNext,
} from '@/utils/approvalTools'
import {ProcessInstanceData } from '../../type/index.do'
// @ts-nocheck
const props = defineProps({
  processInstanceData: {
    type: Array as PropType<ProcessInstanceData[]>,
    default() {
      return []
    },
  },
})
// 日期
const timeSplit = (applyTime: string | number, dateFormat = 'YYYY年MM月DD日') => {
  return applyTime 
}
</script>
<style lang="less">
.recordData .arco-steps-item-content {
  width: 95%;
  .arco-steps-item-title {
    width: 100%;
  }
}
.addsatus {
  display: flex;
  .arco-steps-icon {
    background: none !important;
  }
  .arco-steps-item-content {
    flex: 1;
  }
  .arco-steps-item-title {
    width: 100%;
  }
}
.processComStyle {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #979797;
}
.process-li {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  //   width: 50% !important;
  p {
    margin: 0;
  }
}
.process-tx {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
.nodeName {
  color: rgb( 29,33,41 ) !important;
}
</style>